<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>黑马练习-新闻搜索</title>
    <link rel="stylesheet" type="text/css" href="css/search.css"/>
    <script src="js/vue.js"></script>
    <script src="js/axios.min.js"></script>
</head>
<body>
<div id="app" class="container">
    <h1>新闻搜索</h1>
    <div class="search-form">
        <input type="search" v-model="searchMap.keyword" @keydown.enter="queryByPage(1)" placeholder="输入搜索关键词" >
        <button type="submit" @click.prevent="queryByPage(1)">搜索</button>
    </div>
    <div class="search-results">

        <!-- 这里是搜索结果的内容 -->
        <div v-for="item in resultMap.records" class="search-result">
            <a :href="'detail.html?id='+item.newsId" target="_blank"><h3 v-html="item.title"></h3></a>
            <div v-html="item.content+'（'+item.source+'）'"></div>

        </div>

        <!-- 这里是分页导航条 -->
        <div class="pagination">
            <a :class="['prev',searchMap.pageNo>1?'':'downUpDisabled']"
               @click.prevent="queryByPage(searchMap.pageNo-1)" href="#">上一页</a>
            <span v-if="frontDot" class="dotted">...</span>
            <a v-for="pn in pageNoList" :class="searchMap.pageNo==pn?'active':''"
               @click.prevent="queryByPage(pn)" href="#">{{pn}}</a>
            <span v-if="backDot" class="dotted">...</span>
            <a  :class="['next',searchMap.pageNo<resultMap.pages?'':'downUpDisabled']"
                @click.prevent="queryByPage(searchMap.pageNo+1)" href="#">下一页</a>
            <span style="padding: 10px">共 {{resultMap.pages}} 页&nbsp;</span>
        </div>

    </div> <!-- 这里是搜索结果的容器结束 -->

</div> <!-- 这里是内容的容器结束 -->
<script type="text/javascript">
    var app = new Vue({
        el:"#app",
        data: {
            //查询条件
            searchMap: {"keyword": "","pageNo": 1, "pageSize": 10},
            //搜索结果
            resultMap: {"total": 0, "pages": 0, "records":[]},
            //导航条-页号数组
            pageNoList: [],
            //导航条-前面3个点
            frontDot: false,
            //导航条-后面3个点
            backDot: false
        },
        methods: {
            //构建分页导航条
            buildPagination() {
                this.pageNoList = [];

                //定义要在页面显示的页号的数量
                var showPageNoTotal = 7;

                //起始页号
                var startPageNo = 1;
                //结束页号
                var endPageNo = this.resultMap.pages;

                //如果总页数大于要显示的页数才有需要处理显示页号数；否则直接显示所有页号
                if (this.resultMap.pages > showPageNoTotal) {

                    //计算当前页左右间隔页数
                    var interval = Math.floor(showPageNoTotal / 2);

                    //根据间隔得出起始、结束页号
                    startPageNo = parseInt(this.searchMap.pageNo) - interval;
                    endPageNo = parseInt(this.searchMap.pageNo) + interval;

                    //处理页号越界
                    if (startPageNo > 0) {
                        if (endPageNo > this.resultMap.pages) {
                            startPageNo = this.resultMap.pages - showPageNoTotal +1;
                            endPageNo = this.resultMap.pages;
                        }
                    } else {
                        endPageNo = showPageNoTotal;
                        startPageNo = 1;
                    }
                }

                //分页导航条上的前、后的那三个点
                this.frontDot = false;
                this.backDot = false;

                if (1 < startPageNo) {
                    this.frontDot = true;
                }

                if (endPageNo < this.resultMap.pages) {
                    this.backDot = true;
                }

                //设置要显示的页号
                for (let i = startPageNo; i <= endPageNo; i++) {
                    this.pageNoList.push(i);
                }
            },
            //根据页号查询
            queryByPage: function (pageNo) {
                if (0 < pageNo && pageNo <= this.resultMap.pages) {
                    this.searchMap.pageNo = pageNo;
                    this.search();
                }
            },
            search(){
                axios.post("/search",this.searchMap).then(function (response) {
                    app.resultMap = response.data;
                    app.buildPagination();
                });
            }
        },
        created(){
            this.search();
        }
    });
</script>
</body>
</html>